<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
        .wrong {
            border: 2px solid red;
        }
        .right {
            border: 2px solid #91B81D;
        }
    </style>
	</head>
	<body>
		账号：<input type="text" /><br><br>
		密码：<input type="password"/>
    	<div>
        	请输入6-12个字符
    	</div>
	</body>
	<script>
		//需求：失去焦点的时候判断input按钮中的值，如果账号或密码在6-12个字符之间通过，否则报错。
   		var inp = document.getElementsByTagName("input");
   		var div = document.getElementsByTagName("div")[0]
   		div.style.display="none";
   		for(var i=0;i<inp.length;i++){
   			inp[i].onblur=function(){
   						if(this.value.length>12||this.value.length<6){
   							div.style.display="inline-block"
   							this.className="wrong"
   						}else{
   							div.style.display="none"
   							this.className="right"
   						}
   						
   				}
   			}
   		
	</script>
	
</html>
